import React from 'react';
import { connect } from 'dva';
import { Tree, Button, Table, Form, Input, Select, Popconfirm, DatePicker, Row, Col  } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;

function OutOfStorage({ dispatch, outOfStorage, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const {roomList} = outOfStorage
    const formItemLayout = {
        wrapperCol: { className: 'wrapper-col' },
    }
    const columns = [{
        title: '设备名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 100,
    }, {
        title: 'RFID号',
        dataIndex: 'rfidNo',
        key: 'rfidNo',
        width: 100,
    }, {
        title: '设备序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 100,
    }, {
        title: '所在位置',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 150,
    }, {
        title: '门禁位置',
        dataIndex: 'desc',
        key: 'desc',
        width: 100,
    }, {
        title: '出/入库',
        dataIndex: 'type',
        key: 'type',
        width: 100,
        render: (value, row, index) => {
            return (
                value==1?"入库":"出库"
            )
        }
    }, {
        title: '描述',
        dataIndex: 'level',
        key: 'level',
        width: 120,
    }, {
        title: '出/入库时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 150,

    }];

    function handleClear() {
        form.resetFields();
    }

    const submitHandle = () => {
        dispatch({
            type: 'outOfStorage/queryList',
            payload: { ...getFieldsValue() },
        });
    }

    const loopRoom = data => data.map((item) => {
        return <Option key={item.id_ + ''}>{item.name}</Option>
    });
    
    const pagination = {
        current: outOfStorage.current,
        pageSize: outOfStorage.currentSize,
        total: outOfStorage.total,
        showSizeChanger: true,
        showTotal: (total => '共' + outOfStorage.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'outOfStorage/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': size } },
            });
        },
        onChange(current) {
            dispatch({
                type: 'outOfStorage/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current , 'pageSize':outOfStorage.currentSize} }
            });
        },
    };

    return (
        <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px', paddingRight:'20px'}}>
                <Form layout="inline" style={{width:'100%'}}>      
                    <Row gutter={16}>
                      <Col span={4}>        
                        <FormItem style={{ width: '100%' }} {...formItemLayout}>
                            {
                              getFieldDecorator('roomId')(
                                <Select
                                    showSearch
                                    allowClear
                                    style={{ width: '100%' }}
                                    placeholder="选择库房/机房"
                                    optionFilterProp="children"
                                >
                                    <Option value="">全部</Option>
                                    {loopRoom(roomList)}

                                </Select>
                              )
                            }
                          </FormItem>
                        </Col>                       
                        <Col span={3}>
                        <FormItem style={{ width: '100%' }} {...formItemLayout}>
                            {getFieldDecorator('assetName')(
                                <Input type="text" placeholder="设备名称" style={{ width: '100%' }} />
                            )}
                        </FormItem>
                        </Col>
                        <Col span={3}>
                        <FormItem style={{ width: '100%' }} {...formItemLayout}>
                            {getFieldDecorator('rfidNo')(
                                <Input type="text" placeholder="请输入RFID号查找" style={{ width: '100%' }} />
                            )}
                        </FormItem>
                        </Col>
                        <Col span={3}>
                        <FormItem style={{ width: '100%' }} {...formItemLayout}>
                            {getFieldDecorator('serialNo')(
                                <Input type="text" placeholder="请输入序列号查找" style={{ width: '100%' }} />
                            )}
                        </FormItem>
                        </Col>
                        <Col span={2}>
                          <FormItem style={{ width: '100%' }} {...formItemLayout}>
                            {getFieldDecorator('type')(
                                <Select
                                    showSearch
                                    allowClear
                                    style={{ width: '100%' }}
                                    placeholder="选择类型"
                                    optionFilterProp="children"
                                >
                                    <Option value="">全部</Option>
                                    <Option value="1">入库</Option>
                                    <Option value="2">出库</Option>
                                </Select>
                            )}
                        </FormItem>
                        </Col>        
                        <Col span={5}>
                         <FormItem style={{ width: '100%' }} {...formItemLayout}>
                            {getFieldDecorator('createTime')(
                                <RangePicker style={{ width: '100%' }}format="YYYY-MM-DD" />
                            )}
                         </FormItem>
                        </Col>                      
                        <Col span={4} style={{ textAlign:'right',paddingRight:0}}>
                            <FormItem>
                                <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                            </FormItem>
                            <FormItem>
                                <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                            </FormItem>
                        </Col>

                    </Row>
                    
                    </Form>
                </div>
                <div style={{ width: '100%', height: '100%', paddingLeft: '20px', paddingTop: '10px', paddingRight: '20px' }}>
                    <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={outOfStorage.list} pagination={pagination}
                    />
                </div>   
            </div>
        </div>
    );

}

function mapStateToProps(state) {
    return { outOfStorage: state.outOfStorage, loading: state.loading.models.outOfStorage };
}

OutOfStorage = Form.create()(OutOfStorage);

export default connect(mapStateToProps)(OutOfStorage);
